SDF Face Shadow 2

간단 요약: SDF Face Shader 자료 링크: https://zhuanlan.zhihu.com/p/361716315 태그: Cartoon, NPR, SDF, Shader, Shadow, Unity

번역 본문

카툰 렌더링(URP)을 위한 SDF 기반 얼굴 그림자 맵 생성 효과 구현 - Zhihu

[ 그림 4 ](javascript:void(0))

팔로우 추천 핫리스트 칼럼 서클 신규 유료상담 Zhixuetang

직답

스위치 모드

로그인/등록

카툰 렌더링(URP)을 위한 SDF 기반 얼굴 그림자 맵 생성 효과 구현

0에서 0.5까지의 카툰 렌더링에서 처음 게재되었습니다.

스위치 모드

그림 5: SDF(URP) 기반 얼굴 그림자 맵 생성의 카툰 렌더링 효과 구현

카툰 렌더링(URP)을 위한 SDF 기반 얼굴 그림자 맵 생성 효과 구현

투웨관

일하기/더위를 견디기/좋은 꿈 꾸기

0에서 0.5까지 · 카툰 렌더링에서 수집

244명이 이 글을 좋아합니다.

나는 훌륭한 사람들의 튜토리얼을 많이 보았습니다.

[ 그림 7 Black Magic Princess: 걸작 얼굴 그림자 렌더링 복원 좋아요 295개 · 댓글 31개 기사](https://zhuanlan.zhihu.com/p/279334552)

이 기사에서는 사진을 만드는 과정에 대해 이야기합니다(대략적인 아이디어).

그림 8 부호 있는 거리 필드 www.codersnotes.com/notes/signed-distance-fields/

이 기사에서는 SDF의 알고리즘에 대해 설명합니다.

[ 그림 9 Orange Cat: 혼합 카툰 라이트 맵을 빠르게 생성하는 방법 241 동의 · 댓글 35개 문서](https://zhuanlan.zhihu.com/p/356185096)

이것은 이전에 그룹의 큰 사람이 작성한 스크립트로 이런 그림을 생성할 수 있습니다.

자, 공부한 후 이 부분의 콘텐츠를 어떻게 완성했는지 이야기해 보겠습니다.

배경:

안녕하세요, 최근에 기억력이 나빴어요. 사장님 코드를 다운받아서 실행한 기억이 뚜렷이 나는데, 사용하고 싶을 때 어디서 다운받았는지 기억이 나지 않더군요. 이 파일을 찾느라 밤을 새웠던 기억이 아직도 생생합니다만, 그룹의 상사에게 감히 물어볼 수도 없었습니다... 왜 그렇게 소심했는지 모르겠습니다.

그래서 다음날 준비했는데...제가 직접 썼어요. 결국 완성하는데 2~3일 걸렸습니다. 그런데 오늘 컴퓨터에서 갑자기 사장님의 스크립트를 발견했는데... 속도 비교를 보자마자 아직 코드에 문제가 있다는 걸 알았습니다. 구현에는 문제가 없었지만 속도 차이가 너무 커서 쓸데없는 일을 많이 했다는 뜻입니다.

제가 처음 작성한 버전은 주로 이 글을 참고하여 작성하였습니다. 보간 횟수를 기준으로 각각의 보간 사진을 계산한 후 평균까지 합산했습니다. 그러나 멀티스레딩을 활성화하면 계산 속도가 여전히 매우 느립니다. 5번 보간하면 빅브라더의 효과를 거의 얻을 수 있으나 속도가 몇분 정도 걸립니다. (빅브라더의 기본 사진은 12M입니다.)

보스 코드의 속도를 보고 문득 깨달은 것은 수정된 코드가 비록 보스 코드보다 조금 느리기는 하지만 마침내 20초 이상 만에 전투를 해결할 수 있다는 것을 깨달았다는 것입니다...

텍스트:

이러한 임계값 맵을 생성하려면 다음을 수행하십시오.

그림 10

계산해야 할 것은 물론 각 픽셀 위치의 임계값입니다.

입력은 여러 특정 각도의 그림자 맵입니다.

그림 11

깨어난 후 관찰하고 이해한 결과 다음과 같은 사실을 발견했습니다.

우선, 모든 이미지의 동일한 픽셀 위치에서 단 한 번의 급격한 값 변화가 있음을 관찰할 수 있습니다. (이것은 실제로 이해하기 쉽습니다. 빛이 회전하면 얼굴의 일부는 다른 부분보다 빠르든 늦든 관계없이 어두운 부분에서 밝은 부분으로 한 번만 변경됩니다.)

이로 인해 입력 사진에 대한 요구 사항이 발생합니다. 사진은 연속적이어야 하며 다음 사진은 이전 사진을 덮을 수 있어야 합니다(어두운 범위일 수도 있고 밝은 범위일 수도 있지만 한 가지 유형만 가능함)

그런 다음 순차적으로 작업하여 해당 sdf 이미지를 먼저 생성할 수 있습니다. (여기에는 함정이 있습니다. dist는 최종적으로 알고리즘의 소스 코드에서 크기가 조정됩니다. 너무 크게 만들면 나중에 임계값을 계산할 때 그라데이션 효과가 부족해질 수 있다는 점에 유의해야 합니다.)

임계값을 구체적으로 계산하는 방법은 실제로 이해하기 매우 간단합니다. 두 사진에서 샘플링된 픽셀의 sdf 값 간의 차이를 기반으로 두 사진의 임계값을 보간하는 것입니다. 나는 내 생각을 명확하게 설명하려고 노력한다.우리는 0-255의 임계값 맵을 생성하려고 합니다. PS에서 임계값이 1 또는 255인 경우 표시되는 사진은 첫 번째 또는 마지막 사진이어야 합니다. 그러면 자연스럽게 중간 그림의 임계값을 계산할 수 있습니다(그림이 균일하게 변경되기 때문). 먼저 평균을 사용하여 간격을 계산한 다음 인덱스를 가져와 각 원본 사진에 해당하는 임계값을 얻습니다.

예를 들어 임계값 맵의 특정 픽셀 포인트의 경우 포인트 값은 128입니다. PS에서 임계값을 128로 조정하면 해당 점이 경계에 있음을 알 수 있습니다. 이 픽셀 포인트의 경우 경계에 한 번만 있거나 경계에 있지 않습니다(항상 밝거나 항상 어두움). 픽셀이 두 그림 사이에 있을 때 특정 임계값 조건 하에서 경계에 있게 됩니다. 그런 다음 전후 두 사진 AB의 해당 임계값을 알면 점의 임계값 계산은 매우 간단합니다. 이전 사진의 임계값 + 이전 사진의 경계에서 점까지의 거리/전후 두 사진 간의 거리 차이

거리에 대한 관련 정보는 해당 sdf 이미지에서 얻을 수 있습니다. 여기서 언급해야 할 점은 거리 차이가 계산되기 때문에 이전 스케일링이 너무 강하면 특정 영역에서 거리 차이가 고정 값이 될 수 있으며 그라데이션 효과가 충분히 강하지 않을 수 있으므로 요구 사항을 충족하는 스케일링 효과를 얻기 위해 직접 조정할 수 있다는 것입니다.

명확하게 설명했는지는 모르겠지만, 이 그래프가 생성되는 과정은 이해가 됩니다. SDF 그래프의 알고리즘은 아마 이해가 되겠지만, 아직 명확하게 설명하기 어렵기 때문에 자세히 설명하지는 않겠습니다. 이런 종류의 그래프를 생성하는 코드에 대해서는 다루지 않겠습니다. 아직도 빅맨들 사이에서 인기가 많네요.

물론 사진은 준비작업입니다. 우리가 해야 할 일은 셰이더에서 그림을 사용하는 것입니다.

먼저 효과를 살펴보겠습니다. (섀도우 맵을 직접 그렸기 때문에 위치가 그다지 정확하지 않을 수도 있습니다.)

그림 12: 애니메이션 표지

효과는 큰 문제가 되지 않는다고 볼 수 있습니다.

셰이더 코드도 어렵지 않습니다.

여기에도 언급되어 있으므로 코드를 다시 게시하겠습니다. 글이 좀 장황하고 번거로울 수도 있겠네요 ㅎㅎ

float isSahdow = 0;
//这张阈值图代表的是阴影在灯光从正前方移动到左后方的变化
half4 ilmTex = tex2D(_IlmTex, input.uv);
 //这张阈值图代表的是阴影在灯光从正前方移动到右后方的变化
half4 r_ilmTex = tex2D(_IlmTex, float2(1 - input.uv.x, input.uv.y));
float2 Left = normalize(TransformObjectToWorldDir(float3(1, 0, 0)).xz);	//世界空间角色正左侧方向向量
float2 Front = normalize(TransformObjectToWorldDir(float3(0, 0, 1)).xz);	//世界空间角色正前方向向量
float2 LightDir = normalize(light.direction.xz);
float ctrl = 1 - clamp(0, 1, dot(Front, LightDir) * 0.5 + 0.5);//计算前向与灯光的角度差（0-1），0代表重合
float ilm = dot(LightDir, Left) > 0 ? ilmTex.r : r_ilmTex.r;//确定采样的贴图
//ctrl值越大代表越远离灯光，所以阴影面积会更大，光亮的部分会减少-阈值要大一点，所以ctrl=阈值
//ctrl大于采样，说明是阴影点
isSahdow = step(ilm, ctrl);
bias = smoothstep(0, _LerpMax, abs(ctrl - ilm));//平滑边界，smoothstep的原理和用法可以参考我上一篇文章
if (ctrl > 0.99 || isSahdow == 1)
    diffuse = lerp(diffuse , diffuse * _ShadowColor.xyz ,bias);

나는 의견이 매우 명확하다고 생각합니다. 궁금한 점이 있으면 언제든지 정정해 주세요!

그런데, 앞머리 섀도우는 이 사장님의 방법으로 구현되었습니다.

2021-07-22 12:20에 수정됨

렌더링

3D 렌더링

[카피라이팅에 대한 아이디어가 없나요? Tencent ima는 수많은 인기 카피라이팅 아이디어를 제공합니다! Tencent ima는 최신 트렌드를 자동으로 추적하고 전문적인 카피라이팅 콘텐츠 프레임워크를 제공할 수 있습니다. 카피라이팅을 생성하는 동안 카피라이팅을 최적화하고 인기 있는 카피라이팅을 쉽게 만들 수도 있습니다. 세부정보를 확인하세요. Tencent ima는 최신 트렌드를 자동으로 추적하고 전문적인 카피라이팅 콘텐츠 프레임워크를 제공할 수 있습니다. 카피라이팅을 생성하는 동안 카피라이팅을 최적화하고 인기 있는 카피라이팅을 쉽게 만들 수도 있습니다. 세부정보 보기! 그림 13: 사용자 아바타 ima의 광고](https://ima.qq.com/download/?webFrom=10000435&channel=10000435&cb=https%3A%2F%2Fsugar.zhihu.com%2Fplutus_adreaper_callback%3Fsi%3D969146e0-9ba8-47f7-b4c5-b0b6c3e03048%26os%3D3%26zid%3D1629%26zaid%3D3671183%26zcid%3D3628753%26cid%3D3628701%26event%3D__EVENTTYPE__%26value%3D__EVENTVALUE__%26ts%3D__TIMESTAMP__%26cts%3D__TS__%26mh%3D__MEMBERHASHID__%26adv%3D703838%26ocg%3D4%26cp%3D2500%26ocs%3D1%26aic%3D0%26atp%3D0%26ct%3D2%26ed%3DGiBNJgVzfCMmUW9XIVDVNQZREwA%3D&spu=biz%3D0%26ci%3D3628753%26si%3Dae055c6f-aa59-473f-925a-75d567de9861%26ts%3D1771476029%26zid%3D1629)

2446개의 댓글에 동의합니다.

좋아요수집재인쇄신청

그림 14

로그인되지 않은 사용자

댓글 6개

기본값

최신

장거리 여행

오른쪽 왼쪽 방향은 -1,0,0이어야 합니다. Unity는 왼손잡이용 시스템입니다.

2022-03-03

답장 5

블레이즈 발칸

시도해 본 결과 2차원 벡터를 정규화할 수 없는 것 같습니다. 정확히 말하면 3차원 공간에서 모두 계산되어야 한다. y 각도를 무시하려면 y를 0으로 설정하고 3차원 공간에서 정규화하세요.

아마도 이와 같을 것입니다. Normalize(float3(lightDir.x ,0, lightDir.z));

2022-10-19

답글2

xpc

참조용으로 전체 셰이더를 보내 주시겠습니까?

2021-04-20

답글2

치즈요거트 씨솔트

그림 19 : [수줍음] 그림 20 : [사랑]

2025-04-03

좋아요를 답글로 달아주세요

쵸퍼린

sahdow --> 그림자 그림 22: [웃음]

2024-07-30

좋아요를 답글로 달아주세요

물고기와고양이

정말 좋습니다. SDF 섀도우 맵에 대한 이전의 모든 의심을 해결했습니다. 나는 항상 다른 사람들의 기사에서 그것을 언급하지 않았다고 느낍니다. 각 픽셀에는 URP 밝은 렌더링과 어두운 렌더링에서 전환 기회가 하나만 있습니다. 너무 훌륭해서 시간 순서로 다시 매핑할 수 있다는 것을 직접 깨달았습니다. 좋아요! 그림 24 : [사랑]

2024-04-13

좋아요를 답글로 달아주세요

저자 소개

투웨관

일하기/더위를 견디기/좋은 꿈 꾸기

답변 0 글 10 팔로워 691

그녀를 팔로우하고 비공개 메시지를 보내세요

모두가 검색 중입니다.

바꿔라

바트만: 사막에 바람이 분다 396만 Hot

사나에 다카이치 내각 총 395만 명 사퇴 Hot

로봇이 춘절 갈라 317만 완전 침공

플라잉라이프3 311만 Hot

설날 AI 듣는 자 307만명 뒤집힐 것인가 이벤트

징저 사일런트 306만New

2026 CCTV 봄축제 갈라 304만

[소이밍 중국 대표단 284만명 첫 금메달 획득] (https://www.zhihu.com/search?q=苏翊鸣斩获中国代表团首金&search_source=Trending&utm_content=search_hot&utm_medium=organic&utm_source=zhihu&type=content)

유슈 로봇 봄 축제 갈라 "Wu BOT" 269만명 후베이성 이청시 폭죽가게 폭발로 12만명, 267만명 사망

광고 그림 26: 광고 그림 27: 광고 그림 28: 광고

_Zhihu에서 일하고 싶나요? jobs@zhihu.com_으로 이메일을 보내주세요.

Zhihu 앱 열기

"마이페이지" 오른쪽 상단의 스캔을 엽니다.

그림 29

기타 QR 코드 스캔 방법: WeChat

Zhihu 앱 다운로드

접근성 모드

인증번호 로그인

비밀번호 로그인

공개기관번호

중국 +86

SMS 인증 코드 받기

음성 인증 코드 받기

로그인/등록

다른 로그인 방법

등록되지 않은 휴대폰은 인증 후 자동으로 로그인됩니다. 등록은 ["Zhihu 계약"] (https://www.zhihu.com/term/zhihu-terms) ["개인정보 보호 지침"] (https://www.zhihu.com/term/privacy)에 동의하는 것을 의미합니다.

QR 코드를 스캔하여 Zhihu 앱을 다운로드하세요.

QR 코드 닫기

Zhihu 앱 열기

"마이페이지" 오른쪽 상단의 스캔을 엽니다.

그림 30

기타 QR 코드 스캔 방법: WeChat

Zhihu 앱 다운로드

접근성 모드

인증번호 로그인

비밀번호 로그인

공개기관번호

중국 +86

SMS 인증 코드 받기

음성 인증 코드 받기

로그인/등록

다른 로그인 방법

QR 코드를 스캔하여 Zhihu 앱을 다운로드하세요.

QR 코드 닫기

수집 메모

이미지 다운로드 실패: https://zhuanlan.zhihu.com/p/361716315 (status 403)

SDF Face Shadow 2

번역 본문

카툰 렌더링(URP)을 위한 SDF 기반 얼굴 그림자 맵 생성 효과 구현 - Zhihu

카툰 렌더링(URP)을 위한 SDF 기반 얼굴 그림자 맵 생성 효과 구현

추천 도서

수집 메모